<template>
  <Nav>
    <div class="container">
      <div class="chers">
        <input class="input" v-model="searchvalue" type="text" />
        <el-button class="button" type="primary" icon="el-icon-search"
          >搜索</el-button
        >
      </div>
      <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="寺庙列表" name="first">
          <Category :spans1="spans1" :spans2="spans2" />
          <div class="contentlist">
            <div
              class="contentlist_item"
              v-for="(item, index) of temple.slice(
                (currentPage - 1) * pageSize,
                currentPage * pageSize
              )"
              :key="index"
              @click="changeRouterDetails(index)"
            >
              <img class="item_image" :src="item.templeimg" :alt="item.name" />
              <p class="item_title">{{ item.name }}</p>
            </div>
          </div>
          <!-- 分页器 -->
          <div class="block" style="margin-top: 0.098039rem">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[8]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="temple.length"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </Nav>
</template>

<script>
import bg from "@/images/bg.png";
import Nav from "@/components/Nav/index";
import Category from "@/components/Category/index";
import { listTemple } from "@/api/data";

export default {
  data() {
    return {
      temple: [],
      params: {
        page: 1,
        perPage: 20,
      },
      index: "",
      spans1: [
        "类目1:",
        "所属乡镇",
        "所属教派",
        "管控部门",
        "内容A4",
        "内容A5",
        "内容A6",
        "内容A7",
        "内容A8",
        "内容A9",
        "内容A10",
        "内容A11",
        "内容A12",
      ],
      spans2: ["类目2:", "内容B1", "内容B2", "内容B3", "内容B4", "内容B5"],
      searchvalue: "",
      appbg: `background:url('${bg}') no-repeat`,
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 8, // 每页的数据条数
      activeName: "first",
    };
  },
  methods: {
    async getListTemple() {
      const data = await listTemple(this.params);
      this.temple = data.list;
      // console.log("temple", this.temple);
    },
    // 分页取id
    changeRouterDetails(index) {
      this.index = index;
      if (this.currentPage > 1) {
        const ids = (this.currentPage - 1) * this.pageSize + index;
        this.index = ids;
      }
      // console.log(this.index);
      // 传过去的id
      // console.log(this.list[this.index].id);
      this.$router.push({
        name: "templedetails",
        params: {
          id: this.temple[this.index].id,
        },
      });
    },
    //tabs信息
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
  mounted() {
    this.getListTemple();
  },
  components: {
    Nav,
    Category,
  },
};
</script>

<style scoped>
.tabs {
  width: 8.916667rem /* 1712/192 */;
  color: #999ba4;
}

.table {
  font-size: 0.072917rem /* 14/192 */;
  width: 8.59375rem /* 1650/192 */;
  color: #999ba4;
  margin: 0.104167rem /* 20/192 */ auto 0;
}

.img {
  border-radius: 50%;
  width: 0.182292rem /* 35/192 */;
  height: 0.182292rem /* 35/192 */;
}

.chers {
  padding-top: 0.15625rem /* 30/192 */;
}

.input {
  width: 2.609375rem /* 501/192 */;
  height: 0.234375rem /* 45/192 */;
}

.contentlist {
  width: 8.59375rem /* 1650/192 */;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0.104167rem /* 20/192 */ auto 0;
  flex-wrap: wrap;
}

.contentlist_item {
  width: 2.083333rem /* 400/192 */;
  height: 1.5625rem /* 300/192 */;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 0.104167rem /* 20/192 */;
}

.item_image {
  width: 1.822917rem /* 350/192 */;
  height: 1.145833rem /* 220/192 */;
  margin: 0.119792rem /* 23/192 */ 0 0.083333rem /* 16/192 */;
}

.item_title {
  font-size: 0.09375rem /* 18/192 */;
  font-family: "Microsoft YaHei", "Microsoft YaHei-Normal";
  font-weight: Normal;
  text-align: center;
  height: 0.135417rem /* 26/192 */;
  line-height: 0.03125rem /* 6/192 */;
  color: #999ba4;
}
</style>